<template>
  <!-- 在线率 -->
	<view class="conter">
    <cc-goback title='在线率' color="#fff"></cc-goback>
     <view class="navigation_head"></view>
		<view class="box">
		  <view class="box_a">
		    总在线率
		  </view>
		  <view class="box_b">
		    {{online_rateList.totalOnlineRate}}%
		  </view>
		</view>
    <!-- 表格卡片 -->
      <view class="list">
        <!-- 表格 -->
        <uni-table border stripe >
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="33%" align="center">企业</uni-th>
            <uni-th width="33%" align="center">总设备数</uni-th>
            <uni-th width="33%" align="center">离线数</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,i) in online_rateList.enterprise" :key='i'>
            <uni-td align="center">{{item.enterpriseName}}</uni-td>
            <uni-td align="center">{{item.total}}</uni-td>
            <uni-td align="center">{{item.inline}}</uni-td>
            <!-- <uni-td align="center" style="color: #FF7F6C;">异常</uni-td> -->
          </uni-tr>
        </uni-table>
      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				online_rateList:''
			};
		},
    onLoad() {
      this.getOnline_rate()
    },
    methods:{
      getOnline_rate(){
        this.$http.get('/envirnment-basic/app/onlineRate/index',{}).then(res=>{
          this.online_rateList = res.data
          console.log(this.online_rateList)
        })
      }
    }
	}
</script>

<style lang="scss">
 .conter {
    // height: 1572rpx;
    background: #F7F7F7;
    overflow: hidden;
  }
  .navigation_head{
    height: calc(88rpx + var(--status-bar-height));
  }
  .box {
    width: 702rpx;
    height: 298rpx;
    margin: 20rpx auto 0;
    background: url(../../static/bg_slices/bg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }

  .box_a {
    text-align: center;
    margin-top: 84rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .box_b {
    text-align: center;
    font-size: 58rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #FFFFFF;
  }
  .list{
    width: 702rpx;
    border-radius: 8rpx;
    margin: 24rpx auto 0;
  }
</style>
